AngularJs Custom Directives

Hi everyone in this article I’m explaining about custom directive in angularjs.

Introduction:

Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile () method of the custom directive then process the element using link () method of the custom directive based on the scope of the directive. AngularJS provides support to create custom directives for following type of elements.

Element directives - Directive activates when a matching element is encountered.
Attribute - Directive activates when a matching attribute is encountered.
CSS - Directive activates when a matching css style is encountered.
Comment - Directive activates when a matching comment is encountered.

Understanding Custom Directive:

Define Custom html tags.

<studentname="Kamlakar"></student><br/>
<studentname="Manoj"></student>

Define custom directive to handle above custom html tags.

var mainApp = angular.module("mainApp", []);
 
    mainApp.directive('student', function () {
        var directive = {};
        directive.restrict = 'E';
        directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
        directive.scope = {
            student: "=name"
        }
        directive.compile = function (element, attributes) {
            element.css("border", "1px solid #cccccc");
            var linkFunction = function ($scope, element, attributes) {
                element.html("Student: <b>" + $scope.student.name + "</b> , Roll No: <b>" + $scope.student.rollno + "</b><br/>");
                element.css("background-color", "#ff00ff");
            }
            return linkFunction;
        }
        return directive;
    });

Define controller to update the scope for directive. Here we are using name attribute's value as scope's child.

mainApp.controller('StudentController', function ($scope) {
        $scope.Mahesh = {};
        $scope.Mahesh.name = "Mahesh Parashar";
        $scope.Mahesh.rollno = 1;
 
        $scope.Piyush = {};
        $scope.Piyush.name = "Piyush Parashar";
        $scope.Piyush.rollno = 2;
    });

Example:

<html>
<head>
   <title>Angular JS Custom Directives</title>
</head>
<body>
   <h2>AngularJS Sample Application</h2>
   <divng-app="mainApp"ng-controller="StudentController">
                                <studentname="Kamlakar"></student><br/>
                                <studentname="Manoj"></student>
   </div>
   <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <script>
       var mainApp = angular.module("mainApp", []);
 
       mainApp.directive('student', function () {
           var directive = {};
           directive.restrict = 'E';
           directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
 
           directive.scope = {
               student: "=name"
           }
 
           directive.compile = function (element, attributes) {
               //element.css("border", "1px solid #cccccc");
 
               var linkFunction = function ($scope, element, attributes) {
                   element.html("Student: <b>" + $scope.student.name + "</b> , Roll No: <b>" + $scope.student.rollno + "</b><br/>");
                   //element.css("background-color", "#ff00ff");
               }
 
               return linkFunction;
           }
 
           return directive;
       });
 
       mainApp.controller('StudentController', function ($scope) {
           $scope.Kamlakar = {};
           $scope.Kamlakar.name = "Kamlakar Singh";
           $scope.Kamlakar.rollno = 1;
 
           $scope.Manoj = {};
           $scope.Manoj.name = "Manoj Pandey";
           $scope.Manoj.rollno = 2;
       });
 
   </script>
</body>
</html>

Output:

Open your html file in a web browser

articles

AngularJs Custom Directives

Introduction:

Understanding Custom Directive:

Example:

Anonymous User

Leave Comment

1 Comments

Comments

Liked By